<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			#box {
				width: 1920px;
				height: 2200px;
				background: rgb(230, 229, 221);
			}
			#nav {
				width: 100%;
				height: 130px;
				overflow: hidden;
				position: relative;
				background: rgb(55, 42, 32);
			}
			.tugou {
				margin-top: 15px;
				margin-left: 110px;
			}
			#xiaonav {
				float: right;
				margin-right: 350px;
				margin-top: 20px;
				overflow: hidden;
			}
			#xiaonav p,
			div {
				float: left;
				font-size: 13px;
				color: rgb(116, 101, 75);
			}
			#xiaonav div {
				width: 2px;
				height: 9px;
				margin-left: 18px;
				margin-right: 18px;
				background: rgb(116, 101, 75);
				margin-top: 3px;
			}
			#shouye {
				position: absolute;
				bottom: 25px;
				left: 570px;
			}
			#shouye span {
				float: left;
				margin-top: 50px;
				/*margin-right: 20px;*/
				margin-right: 140px;
			}
			#shouye span p:nth-of-type(1) {
				text-align: center;
				margin-bottom: 10px;
				font-size: 10px;
			}
			#shouye span p:nth-of-type(2) {
				text-align: center;
				font-size: 20px;
				color: rgb(171, 211, 145);
			}
			.line {
				width: 2px;
				height: 28px;
				background: rgb(134, 117, 88);
				position: absolute;
				bottom: 0;
			}
			.one {
				left: 546px;
			}
			.two {
				left: 726px;
			}
			.three {
				left: 910px;
			}
			.four {
				left: 1100px;
			}
			.five {
				left: 1300px;
			}
			#sousuo {
				position: absolute;
				width: 400px;
				height: 45px;
				right: 100px;
				bottom: 25px;
				overflow: hidden;
				border: 2px solid rgb(106, 79, 59);
				border-radius: 30px;
				background: rgb(49, 37, 30);
			}
			#shuru {
				float: left;
				width: 250px;
				height: 45px;
				margin-left: 18px;
				background: rgb(49, 37, 30);
				border: none;
				font-size: 20px;
			}
			#shuru::-webkit-input-placeholder {
				color: rgb(113, 98, 74);
			}
			#sousuo p {
				display: inline-block;
			}
			#sousuo p {
				width: 88px;
				height: 45px;
				background: #4e3d30;
				line-height: 45px;
				font-size: 20px;
				text-align: center;
			}
			#header {
				width: 100%;
				height: 315px;
				position: relative;
				background: url(img/background.png) no-repeat;
			}
			#header p {
				font-size: 18px;
				position: absolute;
			}
			#header p:nth-of-type(1) {
				left: 1288px;
				top: 60px;
				color: white;
			}
			#header p:nth-of-type(2) {
				left: 1288px;
				top: 95px;
				color: white;
			}
			#header p:nth-of-type(3) {
				left: 1288px;
				top: 130px;
				color: white;
			}
			#header p:nth-of-type(4) {
				left: 208px;
				top: 185px;
				color: #6ce41e;
			}
			#header p:nth-of-type(5) {
				left: 570px;
				top: 157px;
				color: rgb(134, 117, 88);
			}
			#header p:nth-of-type(6) {
				left: 930px;
				top: 210px;
				color: rgb(134, 117, 88);
			}
			#header p:nth-of-type(7) {
				left: 1650px;
				top: 195px;
				color: rgb(134, 117, 88);
			}
			#content {
				width: 1300px;
				height: 935px;
				margin-left: 310px;
			}
			#con-hea {
				width: 100%;
				height: 45px;
			}
			#con-hea p {
				font-size: 20px;
				display: inline-block;
				line-height: 45px;
				border-bottom: 2px solid black;
			}
			#con-hea select {
				float: right;
				width: 150px;
				height: 30px;
				background: ;
				margin-top: 10px;
				font-size: 16px;
				color: rgb(134, 117, 88);
			}
			#con-hea span {
				font-size: 16px;
				float: right;
				margin-top: 16px;
				margin-right: 8px;
			}
			#con-nav {
				width: 100%;
				height: 50px;
				background: white;
				margin-top: 2px;
				margin-bottom: 25px;
			}
			.zhengfangxing {
				width: 15px;
				height: 15px;
				display: inline-block;
				border: 1px solid black;
				margin: 15px 18px;
			}
			#fangkuai {
				width: 15px;
				height: 15px;
				display: inline-block;
				border: 1px solid black;
				margin: 15px 18px;
			}
			#main {
				width: 100%;
				height: 820px;
				background: white;
				position: relative;
			}
			.main-a {
				width: 100%;
				height: 160px;
				position: absolute;
			}
			.main-b {
				width: 100%;
				height: 160px;
				position: absolute;
				top: 162px;
			}
			.main-c {
				width: 100%;
				height: 160px;
				position: absolute;
				top: 324px;
			}
			.main-e {
				width: 100%;
				height: 160px;
				position: absolute;
				top: 486px;
			}
			.main-d {
				width: 100%;
				height: 160px;
				position: absolute;
				top: 648px;
			}
			.caihua {
				margin-top: 55px;
				font-size: 16px;
				margin-left: 20px;
			}
			#jiesuan {
				width: 100%;
				height: 60px;
				background: white;
				margin-top: 50px;
			}
			#zhengfang {
				width: 15px;
				height: 15px;
				display: inline-block;
				border: 1px solid black;
				margin: 20px 18px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div id="nav">
				<img src="img/logo.png" class="tugou" />
				<div id="xiaonav">
					<p>登录</p>
					<div></div>
					<p>注册</p>
					<div></div>
					<p>我的</p>
					<div></div>
					<p>收藏</p>
					<div></div>
					<p>消息</p>
				</div>
				<div id="shouye">
					<span>
						<p>Home</p>
						<p>首页</p>
					</span>
					<span>
						<p>Mall</p>
						<p>商城</p>
					</span>
					<span>
						<p>Choose</p>
						<p>选菜</p>
					</span>
					<span>
						<p>Community</p>
						<p>圈子</p>
					</span>
					<span>
						<p>Shopping</p>
						<p class="gouwu" style="color: rgb(110,175,65);">购物车</p>
					</span>
				</div>
				<div id="sousuo">
					<img src="img/未标题-1.png" style="margin-left: 20px;margin-top: 10px;float: left;" />
					<input type="" name="" id="shuru" value="" placeholder="搜索食材、菜品" />
					<p>搜索</p>
				</div>

				<div class="line one"></div>
				<div class="line two"></div>
				<div class="line three"></div>
				<div class="line four"></div>
				<div class="line five"></div>
			</div>
			<div id="header">
				<p>我的订单</p>
				<p>客服在线</p>
				<p>退出登录</p>
				<p>加入购物车</p>
				<p>提交订单</p>
				<p>结算</p>
				<p>待收货</p>
			</div>
			<div id="content">
				<div id="con-hea">
					<p style="color: black;border-bottom: 2px solid black ;">全部商品 5</p>

					<select name="" style="background:rgb(230,229,221) ;">
						<option value="" >北京大兴区亦庄</option>
						<option value="" >北京大兴区亦庄</option>
						<option value="" >北京大兴区亦庄</option>
					</select>
					<span>配送至:</span>
				</div>
				<div id="con-nav">
					<div id="fangkuai"></div>
					<p style="font-size: 20px;margin-top: 15px;display: inline-block;">全选</p>
					<p style="font-size: 20px;margin-top: 15px;display: inline-block;margin-left: 125px;">商品</p>
					<p style="font-size: 20px;margin-top: 15px;display: inline-block;margin-left: 535px;">单价(元)</p>
					<p style="font-size: 20px;margin-top: 15px;display: inline-block;margin-left: 115px;">数量</p>
					<p style="font-size: 20px;margin-top: 15px;display: inline-block;margin-left: 115px;">小计(元)</p>
				</div>
				<div id="main">
					<div class="main-a shanchu">
						<div class="zhengfangxing"></div>
						<div>
							<span>
								<img src="img/img1.png" style="float: left;margin-top: 25px;margin-left: 10px;"/>
								<div class="caihua">
									<p style="margin-bottom: 10px;">本来精选---密云散菜花</p>
									<p>生态农场直供，新鲜安全</p>
								</div>
							</span>
							<span style="text-align: right;display: inline-block;left: 780px;top: 50px; width: 82px;height:42px;position:absolute;font-size: 18px;">
								<p class="jiage">6.00</p>
								<select name="" style="background: white;border: 1px solid red;color: red;">
									<option value="">促销优惠</option>
								</select>
							</span>
							<span style="left: 950px;top: 50px;">
								<p class="jian" style="position:absolute;left: 920px;top: 50px;width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">-</p>
								<div class="shuliang" style="position:absolute;left: 940px;top: 50px;width: 40px;border: 1px solid rgb(134,117,88);font-size: 18px;text-align: center;">
									1
								</div>
								<p class="jia" style="position:absolute;left: 980px;top: 50px; width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">+</p>
								<p style="color: red;position: absolute;left: 935px;top: 80px;font-size: 15px;">仅剩四件</p>
								<div class="jieguo" style="position: absolute;left: 1020px;top:50px;font-size: 20px;">
									6.00
								</div>
								
							</span>
							<p style="position: absolute;left: 1150px;top:45px;font-size: 16px;color: black;">删除</p>
							<p style="position: absolute;left: 1150px;top:63px;font-size: 16px;color: black;">移动到我的关注</p>
						</div>
					</div>
					<div class="main-b shanchu">
						<div class="zhengfangxing"></div>
						<div>
							<span>
								<img src="img/img2.png" style="float: left;margin-top: 25px;margin-left: 10px;"/>
								<div class="caihua">
									<p style="margin-bottom: 10px;">有机圆白菜 750g</p>
									<p>手撕包菜必备</p>
								</div>
							</span>
							<span style="text-align: right;display: inline-block;left: 780px;top: 50px; width: 82px;height:42px;position:absolute;font-size: 18px;">
								<p class="jiage">4.00</p>
								<select name="" style="background: white;border: 1px solid red;color: red;">
									<option value="">促销优惠</option>
								</select>
							</span>
							<span style="left: 950px;top: 50px;">
								<p class="jian" style="position:absolute;left: 920px;top: 50px;width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">-</p>
								<div class="shuliang" style="position:absolute;left: 940px;top: 50px;width: 40px;border: 1px solid rgb(134,117,88);font-size: 18px;text-align: center;">
									4
								</div>
								<p class="jia" style="position:absolute;left: 980px;top: 50px; width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">+</p>
								<p style="color: red;position: absolute;left: 935px;top: 80px;font-size: 15px;">仅剩四件</p>
								<div class="jieguo" style="position: absolute;left: 1020px;top:50px;font-size: 20px;">
									16.00
								</div>
								
							</span>
							<p style="position: absolute;left: 1150px;top:45px;font-size: 16px;color: black;">删除</p>
							<p style="position: absolute;left: 1150px;top:63px;font-size: 16px;color: black;">移动到我的关注</p>
						</div>
					</div>
					<div class="main-c shanchu">
						<div class="zhengfangxing"></div>
						<div>
							<span>
								<img src="img/img3.png" style="float: left;margin-top: 25px;margin-left: 10px;"/>
								<div class="caihua">
									<p style="margin-bottom: 10px;">北旺冻五花肉</p>
									<p>绿色认证好猪肉</p>
								</div>
							</span>
							<span style="text-align: right;display: inline-block;left: 780px;top: 50px; width: 82px;height:42px;position:absolute;font-size: 18px;">
								<p class="jiage">20.00</p>
								<select name="" style="background: white;border: 1px solid red;color: red;">
									<option value="">促销优惠</option>
								</select>
							</span>
							<span style="left: 950px;top: 50px;">
								<p class="jian" style="position:absolute;left: 920px;top: 50px;width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">-</p>
								<div class="shuliang" style="position:absolute;left: 940px;top: 50px;width: 40px;border: 1px solid rgb(134,117,88);font-size: 18px;text-align: center;">
									2
								</div>
								<p class="jia" style="position:absolute;left: 980px;top: 50px; width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">+</p>
								<p style="color: red;position: absolute;left: 935px;top: 80px;font-size: 15px;">仅剩四件</p>
								<div class="jieguo" style="position: absolute;left: 1020px;top:50px;font-size: 20px;">
									40.00
								</div>
								
							</span>
							<p style="position: absolute;left: 1150px;top:45px;font-size: 16px;color: black;">删除</p>
							<p style="position: absolute;left: 1150px;top:63px;font-size: 16px;color: black;">移动到我的关注</p>
						</div>
					</div>
					<div class="main-d shanchu">
						<div class="zhengfangxing"></div>
						<div>
							<span>
								<img src="img/img4.png" style="float: left;margin-top: 25px;margin-left: 10px;"/>
								<div class="caihua">
									<p style="margin-bottom: 10px;">本来精选---密云散菜花</p>
									<p>生态农场直供，新鲜安全</p>
								</div>
							</span>
							<span style="text-align: right;display: inline-block;left: 780px;top: 50px; width: 82px;height:42px;position:absolute;font-size: 18px;">
								<p class="jiage">9.00</p>
								<select name="" style="background: white;border: 1px solid red;color: red;">
									<option value="">促销优惠</option>
								</select>
							</span>
							<span style="left: 950px;top: 50px;">
								<p class="jian" style="position:absolute;left: 920px;top: 50px;width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">-</p>
								<div class="shuliang" style="position:absolute;left: 940px;top: 50px;width: 40px;border: 1px solid rgb(134,117,88);font-size: 18px;text-align: center;">
									1
								</div>
								<p class="jia" style="position:absolute;left: 980px;top: 50px; width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">+</p>
								<p style="color: red;position: absolute;left: 935px;top: 80px;font-size: 15px;">仅剩四件</p>
								<div class="jieguo" style="position: absolute;left: 1020px;top:50px;font-size: 20px;">
									9.00
								</div>
								
							</span>
							<p style="position: absolute;left: 1150px;top:45px;font-size: 16px;color: black;">删除</p>
							<p style="position: absolute;left: 1150px;top:63px;font-size: 16px;color: black;">移动到我的关注</p>
						</div>
					</div>
					<div class="main-e shanchu">
						<div class="zhengfangxing"></div>
						<div>
							<span>
								<img src="img/img5.png" style="float: left;margin-top: 25px;margin-left: 10px;"/>
								<div class="caihua">
									<p style="margin-bottom: 10px;">宫保鸡丁</p>
									<p>干辣椒 大蒜 大葱 胡椒粉 料酒</p>
								</div>
							</span>
							<span style="text-align: right;display: inline-block;left: 780px;top: 50px; width: 82px;height:42px;position:absolute;font-size: 18px;">
								<p class="jiage">30.00</p>
								<select name="" style="background: white;border: 1px solid red;color: red;">
									<option value="">促销优惠</option>
								</select>
							</span>
							<span style="left: 950px;top: 50px;">
								<p class="jian" style="position:absolute;left: 920px;top: 50px;width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">-</p>
								<div class="shuliang" style="position:absolute;left: 940px;top: 50px;width: 40px;border: 1px solid rgb(134,117,88);font-size: 18px;text-align: center;">
									4
								</div>
								<p class="jia" style="position:absolute;left: 980px;top: 50px; width: 18px;height: 18px;border: 1px solid rgb(134,117,88);font-size: 20px;text-align: center;">+</p>
								<p style="color: red;position: absolute;left: 935px;top: 80px;font-size: 15px;">仅剩四件</p>
								<div class="jieguo" style="position: absolute;left: 1020px;top:50px;font-size: 20px;">
									120.00
								</div>
								
							</span>
							<p style="position: absolute;left: 1150px;top:45px;font-size: 16px;color: black;" class="shanchu">删除</p>
							<p style="position: absolute;left: 1150px;top:63px;font-size: 16px;color: black;">移动到我的关注</p>
						</div>
					</div>
				</div>
				<div id="jiesuan">
					<div id="zhengfang"></div>
					<p style="font-size: 20px;margin-top: 18px;display: inline-block;">全选</p>
					<p style="display: inline-block;font-size: 20px;margin-top: 18px;margin-left: 50px;" id="shangchuxuanxiang">删除选中选项</p>
					<p style="display: inline-block;font-size: 20px;margin-top: 18px;margin-left: 70px;">移到我的关注</p>
					<p style="float: right;background: red;width: 150px;height: 60px;font-size: 30px;text-align: center;line-height: 60px;color: white;">去结算</p>
					<div style="float: right;font-size: 14px;line-height: 60px;margin-right: 100px;">
						<p style="display: inline-block;">已选</p>
						<p style="display: inline-block;color: red;" id="shulianghe">0</p>
						<p style="display: inline-block;">件商品^总价(不含运费):</p>
						<p style="display: inline-block;margin-left: 20px;">¥</p>
						<p style="display: inline-block;color: red;" id="zongjiage">00.00</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var shangpinfangkuai = document.getElementsByClassName("zhengfangxing");
		var zhengfang1 = document.getElementById("fangkuai");
		var zhengfang2 = document.getElementById("zhengfang");
		var jian = document.getElementsByClassName("jian");
		var danjia = document.getElementsByClassName("jiage")
		var jia = document.getElementsByClassName("jia");
		var shuliang = document.getElementsByClassName("shuliang");
		var jieguo = document.getElementsByClassName("jieguo");
		var geshu = document.getElementById("shulianghe");
		var zongjiage = document.getElementById("zongjiage");
		var shanchuxuanxiang = document.getElementById("shangchuxuanxiang");
		var panduan = true;
		var dangepanduan1 = true;
		var dangepanduan2 = true;
		var dangepanduan3 = true;
		var dangepanduan4 = true;
		var dangepanduan5 = true;
		var dangepanduan = [dangepanduan1,dangepanduan2,dangepanduan3,dangepanduan4,dangepanduan5]
		var jishu = 0;
		function dianjibianse() {
			zhengfang1.onclick = function() {
				if (panduan) {
					jishu = 5;
					zhengfang1.style.background = "blue";
					zhengfang2.style.background = "blue";
					for (var i = 0; i < shangpinfangkuai.length; i++) {
						shangpinfangkuai[i].style.background = "blue";
					}	
						panduan = false;
						dangepanduan[0] = false;
						dangepanduan2[1] = false;
						dangepanduan[2] = false;
						dangepanduan[3] = false;
						dangepanduan[4] = false;
					geshu.innerHTML = jishu;
					zongjiage.innerHTML = parseInt(jieguo[0].innerHTML) + parseInt(jieguo[1].innerHTML) + parseInt(jieguo[2].innerHTML)  + parseInt(jieguo[3].innerHTML) + parseInt(jieguo[4].innerHTML)+".00";
				} else {
					jishu = 0;
					zhengfang1.style.background = "white";
					zhengfang2.style.background = "white";
					for (var i = 0; i < shangpinfangkuai.length; i++) {
						shangpinfangkuai[i].style.background = "white";
					}
						panduan = true;
						dangepanduan[0] = true;
						dangepanduan[1] = true;
						dangepanduan[2] = true;
						dangepanduan[3] = true;
						dangepanduan[4] = true;
					geshu.innerHTML = jishu;
					zongjiage.innerHTML = "0.00";
				}
			}
			zhengfang2.onclick = function() {
				if (panduan) {
					jishu = 5;
					zhengfang1.style.background = "blue";
					zhengfang2.style.background = "blue";
					for (var i = 0; i < shangpinfangkuai.length; i++) {
						shangpinfangkuai[i].style.background = "blue";
						}
						panduan = false;
						dangepanduan[0] = false;
						dangepanduan2[1] = false;
						dangepanduan[2] = false;
						dangepanduan[3] = false;
						dangepanduan[4] = false;
						zongjiage.innerHTML = parseInt(jieguo[0].innerHTML) + parseInt(jieguo[1].innerHTML) + parseInt(jieguo[2].innerHTML)  + parseInt(jieguo[3].innerHTML) + parseInt(jieguo[4].innerHTML)+".00";
					geshu.innerHTML = jishu;
				} else {
					jishu = 0;
					zhengfang1.style.background = "white";
					zhengfang2.style.background = "white";
					for (var i = 0; i < shangpinfangkuai.length; i++) {
						shangpinfangkuai[i].style.background = "white";
						panduan = true;
						dangepanduan[0] = true;
						dangepanduan[1] = true;
						dangepanduan[2] = true;
						dangepanduan[3] = true;
						dangepanduan[4] = true;
					}
					geshu.innerHTML = jishu;
					zongjiage.innerHTML = "0.00";
				}
				
			}
		}
		dianjibianse();
		function dandian() {
			for (var i = 0; i < shangpinfangkuai.length; i++) {
				shangpinfangkuai[i].index = i;
				shangpinfangkuai[i].onclick = function() {
					if (dangepanduan[this.index]) {
						shangpinfangkuai[this.index].style.background = "blue";
						jishu++;
						dangepanduan[this.index] = false;
						var zhongjianzhi =parseInt(zongjiage.innerHTML);
						zongjiage.innerHTML = zhongjianzhi + parseInt(jieguo[this.index].innerHTML) + ".00" ;
					} else {
						shangpinfangkuai[this.index].style.background = "white";
						jishu--;
						dangepanduan[this.index] = true;
						var zhongjianzhi1 =parseInt(zongjiage.innerHTML);
						zongjiage.innerHTML = zhongjianzhi1 - parseInt(jieguo[this.index].innerHTML) + ".00" ;
					}
					geshu.innerHTML = jishu;	
				}
			}
		}
		dandian();
		var bol = false;
		var xianshi;
		var dangejiage;
		function jiahaoyunsuan(){
			for(var i = 0;i <jia.length;i++){
				jia[i].index = i;
				jia[i].onclick = function(){
					xianshi =parseInt(shuliang[this.index].innerHTML);
					dangejiage = parseInt(danjia[this.index].innerHTML)
						shuliang[this.index].innerHTML = xianshi + 1;
						if(shuliang[this.index].innerHTML >= 4){
							shuliang[this.index].innerHTML = 4;
						}
						jieguo[this.index].innerHTML = shuliang[this.index].innerHTML * dangejiage + ".00";
						if(shangpinfangkuai[this.index].style.background == "blue"){
							var jieguobianhua = parseInt(zongjiage.innerHTML);
							if(xianshi == 4){
								dangejiage = 0;
							}
							zongjiage.innerHTML = jieguobianhua + parseInt(dangejiage) + ".00" ;	
						}
				}
			}
		}
		function jianhaoyunsuan(){
			for(var i = 0;i <jia.length;i++){
				jian[i].index = i;
				jian[i].onclick = function(){
					xianshi =parseInt(shuliang[this.index].innerHTML);
					dangejiage = parseInt(danjia[this.index].innerHTML)
						shuliang[this.index].innerHTML = xianshi - 1;
						if(shuliang[this.index].innerHTML <= 0){
							shuliang[this.index].innerHTML = 0;
						}
						jieguo[this.index].innerHTML = shuliang[this.index].innerHTML * dangejiage + ".00";
						if(shangpinfangkuai[this.index].style.background == "blue"){
							var jieguobianhua1 = parseInt(zongjiage.innerHTML);
							if(xianshi == 0){
								dangejiage = 0;
							}
							zongjiage.innerHTML = jieguobianhua1 - parseInt(dangejiage) + ".00" ;							
						}
					}
				}
			}
		jianhaoyunsuan();
		jiahaoyunsuan();
	</script>
</html>